<template>
	<view class="content">
		<view class="notice-wrap" v-if="news.length>0">
			<u-notice-bar color="#fff" bgColor="rgba(0,0,0,0.3)" :text="news"></u-notice-bar>
		</view>
		<map id="map" ref="map" :longitude="center.longitude" :scale="18" :latitude="center.latitude"
			@markertap="markertap" :show-location="true"></map>
		<!-- subkey="HZ7BZ-S233B-36FUM-NHPQ6-5SP7J-IUB3B" -->
		<view class="danmu-wrap">
			<lff-barrage ref="lffBarrage"></lff-barrage>
		</view>
		<view class="page-center" @click="setLocation(1)" v-if="pageType==='user'">
			<image class="icon" src="../../static/index/userCenter.png" mode="widthFix"></image>
		</view>
		<u-popup :show="areaShow" :round="10" mode="bottom" @close="areaShow=false"
			:overlayStyle="{background: 'rgba(0, 0, 0, 0)'}">
			<view class="area-wrap">
				<view class="area-msg">
					<video class="area-pic" controls @error="videoErrorCallback" :src="areaInfo.jq_video"></video>
					<view class="msg">
						<view class="title">
							{{areaInfo.jq_title}}
						</view>
						<view class="look" @click="looklxt">
							园区展演时间表
						</view>
					</view>
				</view>
				<view class="area-tit">
					简介
				</view>
				<view class="area-content">
					<u-parse :content="areaInfo.jq_intro"></u-parse>
				</view>
			</view>
		</u-popup>
		<u-popup :show="helpShow" :round="10" mode="bottom" @close="helpShow=false"
			:overlayStyle="{background: 'rgba(0, 0, 0, 0)'}">
			<view class="area-wrap">
				<view class="area-tit">
					使用说明
				</view>
				<view class="area-content">
					<u-parse :content="helpInfo"></u-parse>
				</view>
			</view>
		</u-popup>
		<view class="page-btn-wrap" v-if="pageType==='area'">
			<view class="page-btn" @click="changePageType('user')">
				<image class="icon" src="../../static/index/yonghu.png" mode="widthFix"></image>
				<view class="text">
					用户
				</view>
			</view>
			<view class="bb"></view>
			<view class="page-btn" @click="sendShow = true">
				<image class="icon" src="../../static/index/tanmu.png" mode="widthFix"></image>
				<view class="text">
					发布弹幕
				</view>
			</view>
			<view class="bb"></view>
			<view class="page-btn" @click="areaShow=!areaShow">
				<image class="icon" src="../../static/index/jingqu.png" mode="widthFix"></image>
				<view class="text">
					景区介绍
				</view>
			</view>
			<view class="bb"></view>
			<view class="page-btn" @click="helpShow=true">
				<image class="icon" src="../../static/index/yiwen.png" mode="widthFix"></image>
				<view class="text">
					使用说明
				</view>
			</view>
		</view>
		<view class="page-btn-wrap" v-if="pageType==='user'">
			<view class="page-btn" @click="changePageType('area')">
				<image class="icon" src="../../static/index/jingqu.png" mode="widthFix"></image>
				<view class="text">
					景点
				</view>
			</view>
			<view class="bb"></view>
			<view class="page-btn" @click="sendShow = true">
				<image class="icon" src="../../static/index/tanmu.png" mode="widthFix"></image>
				<view class="text">
					发布弹幕
				</view>
			</view>
			<view class="bb"></view>
			<view class="page-btn" @click="changeUserType('1')" v-if="userType==='2'">
				<image class="icon" src="../../static/index/yonghu.png" mode="widthFix"></image>
				<view class="text">
					i人
				</view>
			</view>
			<view class="page-btn" @click="changeUserType('2')" v-if="userType==='1'">
				<image class="icon" src="../../static/index/yonghu.png" mode="widthFix"></image>
				<view class="text">
					e人
				</view>
			</view>
			<view class="bb"></view>
			<view class="page-btn" @click="helpShow=true">
				<image class="icon" src="../../static/index/yiwen.png" mode="widthFix"></image>
				<view class="text">
					使用说明
				</view>
			</view>
		</view>
		<u-popup :show="phoneShow" mode="center" round="14rpx">
			<view class="pop-wrap">
				<view class="pop-title">
					登录
				</view>
				<view class="form">
					<view class="form-item">
						<view class="phone-icon">
							+86
						</view>
						<view class="inp">
							<u-input placeholder="请输入手机号" border="none" type="number"
								v-model="phoneForm.mobile"></u-input>
						</view>
					</view>
					<view class="form-item">
						<view class="inp">
							<u-input placeholder="请输入验证码" border="none" v-model="phoneForm.password"></u-input>
						</view>
						<view class="code">
							<u-code ref="uCode" @change="codeChange" seconds="60" changeText="X秒重新获取"></u-code>
							<view class="get-code" @click="getCode">
								{{tips}}
							</view>
						</view>

					</view>
				</view>
				<view class="submit" @click="phoneLogin">
					登录
				</view>
			</view>
		</u-popup>
		<u-popup :show="userShow" @close="userShow=false" mode="center" round="14rpx">
			<view class="pop-wrap">
				<view class="pop-title">
					个人信息
				</view>
				<view class="user-msg" style="border-bottom: 1px solid #E7E7E7;">
					<view class="label">
						头像
					</view>
					<button class="avatar-wrapper" open-type="chooseAvatar" @chooseavatar="changeTx">
						<u-avatar shape="circle" size="120rpx" :src="userInfo.avatar"></u-avatar>
					</button>
				</view>
				<view class="user-msg" style="border-bottom: 1px solid #E7E7E7;">
					<view class="label">
						昵称：
					</view>
					<u-input v-model="userInfo.nickname" inputAlign="right" border="none" placeholder="请输入昵称"
						type="nickname" />
				</view>
				<view class="user-msg" style="border-bottom: 1px solid #E7E7E7;">
					<view class="label">
						标签
					</view>
					<view class="check">
						<view class="check-option" :class="userInfo.label==1?'active':''" @click="chageUserLabel(1)">
							i人
						</view>
						<view class="check-option" :class="userInfo.label==2?'active':''" @click="chageUserLabel(2)">
							e人
						</view>
					</view>
				</view>
				<view class="user-msg">
					<view class="label">
						个性化标签
					</view>
					<view class="add" @click="addBQ">
						+添加
					</view>
				</view>
				<view class="tips">
					<view class="tips-item" v-for="(item,index) in userInfo.biaoqian">
						{{item}}
						<view style="width: 12rpx;"></view>
						<u-icon name="close" color="#F4BD38" size="18rpx" @click="delBiaoqian(index)"></u-icon>
					</view>
				</view>
				<view class="submit" style="margin-top: 20rpx;" @click="saveUser">
					保存
				</view>
			</view>
		</u-popup>
		<u-popup :show="peopleShow" @close="peopleShow=false" mode="bottom" round="14rpx">
			<view class="pop-wrap area-wrap">
				<view class="user-info flexAC">
					<image class="tx" :src="selectUser.avatar"></image>
					<view class="msg">
						<view class="name">
							{{selectUser.nickname}}
						</view>
						<view class="ads flexAC">
							<image class="dt" src="../../static/index/ditu.png" mode="widthFix"></image>
							当前距离：{{selectUser.juli}}km
						</view>
					</view>
				</view>
				<view class="tips">
					<view class="tips-item" v-for="i in selectUser.biaoqian">
						{{i}}
					</view>
				</view>
				<view class="submit" :class="selectUser.yq_stu===1?'hui':''" style="margin-top: 90rpx;width: 500rpx;"
					@click="inviteUser">
					{{selectUser.yq_stu===1?'已邀请':'发送邀请'}}
				</view>
			</view>
		</u-popup>
		<u-popup :show="sendShow" mode="center" round="14rpx" :safeAreaInsetBottom="false">
			<view class="pop-wrap">
				<view class="pop-title" style="margin-bottom: 40rpx;">
					发布弹幕
				</view>
				<u-textarea v-model="value1" placeholder="请输入弹幕内容....." height="220rpx" border="none"></u-textarea>
			</view>
			<view class="submit-wrap flexAC">
				<view class="btn flexAJC" @click="sendShow=false">
					取消
				</view>
				<view class="btn flexAJC" @click="sendMsg" style="color: #F4BD38;border-left: 1px solid #5B5B5B;">
					发布
				</view>
			</view>
		</u-popup>
		<tabbar index="map"></tabbar>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				title: 'Hello',
				center: {
					latitude: 34.941031,
					longitude: 114.500107
				},
				userCenter: {
					latitude: 34.941031,
					longitude: 114.500107
				},
				mapContext: null,
				phoneShow: false,
				userShow: false,
				areaShow: false,
				peopleShow: false,
				sendShow: false,
				helpShow: false,
				phoneForm: {
					mobile: '',
					password: '',
				},
				tips: '',
				pageType: 'area', //area景区 user用户
				userType: '1', //地图用户显示类型	0=全部、1=i人、2=e人
				value1: '',
				userInfo: {},
				newsTrue: [],
				danmu: [],
				dmSendTimer: null,
				areaInfo: {
					jq_video: ''
				},
				helpInfo: {},
				userList: [],
				selectUser: {},
				locationTimer: null,
				danmuTimer: null,
				noticeTimer: null,
				inviteTimer: null,
				indesUserTimer: null,
				news: '',
				noticeIndex: 0,
				areaCenter: {
					northeast: {
						latitude: 34.94776395037879,
						longitude: 114.51009035110474
					},
					southwest: {
						latitude: 34.936396717538415,
						longitude: 114.48923349380493
					}
				},
				dmKey: 0
			}
		},
		onLoad() {
			if (uni.getStorageSync('token')) {
				this.getPageMsg()
			}
		},
		onShow() {
			if (uni.getStorageSync('token')) {
				this.setTimer()
				this.setLocation(1);
				this.updateLocationChange();
			} else {
				this.phoneShow = true
			}
		},
		onHide() {
			if (uni.getStorageSync('token')) {
				uni.stopLocationUpdate();
				// if (this.locationTimer) clearInterval(this.locationTimer)
				if (this.danmuTimer) clearInterval(this.danmuTimer)
				if (this.noticeTimer) clearInterval(this.noticeTimer)
				if (this.indesUserTimer) clearInterval(this.indesUserTimer)
				if (this.inviteTimer) clearInterval(this.inviteTimer)
			}
		},
		mounted() {
			this.mapContext = uni.createMapContext('map', this)
			// this.mapContext.addCustomLayer({
			// 	layerId: '65f571ab1957',
			// 	success: () => {
			// 		console.log("显示成功", southwest, northeast)
			// 	},
			// 	fail: (e) => {
			// 		console.log("显示失败", e)
			// 	},
			// 	complete: (e) => {
			// 		console.log("complete", e)
			// 	}
			// })
			this.mapContext.addGroundOverlay({
				id: 11,
				src: 'https://jq.tengshuokeji.com/assets/jq.png',
				visible: true,
				opacity: 1,
				bounds: this.areaCenter,
				zIndex: 1000,
				success: () => {
					console.log("显示成功", southwest, northeast)
				},
				fail: (e) => {
					console.log("显示失败", e)
				},
				complete: (e) => {
					console.log("complete", e)
				}
			})
			this.getArea()
		},
		methods: {
			updateLocationChange() {
				if (!uni.getStorageSync('token')) {
					return false;
				}
				let that = this;
				uni.startLocationUpdate({
					success: res => {
						uni.onLocationChange(function(res2) {
							console.log('开启小程序接收位置消息', res2);
							if (res2.speed >= 1) {
								that.$api.index.indexLocation({
									lng: res2.longitude,
									lat: res2.latitude
								})
								that.center = {
									latitude: res.latitude,
									longitude: res.longitude
								}
								that.mapContext.moveToLocation()
								if (that.pageType === 'user') {
									that.getIndexUser1()
								}
							}
						});
					},
					fail: err => console.error('开启小程序接收位置消息失败：', err),
					complete: msg => console.log('调用开启小程序接收位置消息 API 完成')
				});
			},
			setTimer() {
				// this.setLocation()
				this.getDanmu()
				this.getInviteList()
				// if (!this.locationTimer) {
				// 	this.locationTimer = setInterval(() => {
				// 		this.setLocation()
				// 	}, 40000)
				// }
				if (!this.danmuTimer) {
					this.danmuTimer = setInterval(() => {
						this.getDanmu()
					}, 60000)
				}
				if (!this.noticeTimer) {
					this.noticeTimer = setInterval(() => {
						this.setNotice()
					}, 10000)
				}
				if (!this.inviteTimer) {
					this.inviteTimer = setInterval(() => {
						this.getInviteList()
					}, 1800000)
				}
			},
			getInviteList() {
				this.$api.user.yq_list({
					status: '2'
				}).then(res => {
					if (res.data.user.length > 0) {
						uni.showModal({
							title: "提醒",
							content: "有人邀请您成为好友，请及时处理",
							confirmText: "去查看",
							success: (res) => {
								if (res.confirm) {
									uni.redirectTo({
										url: "/pages/mine/invite?type=2"
									})
								}
							}
						})
					}
				})
			},
			setNotice() {
				if (this.noticeIndex === this.newsTrue.length - 1) {
					this.noticeIndex = 0
				} else {
					++this.noticeIndex
				}
				this.news = this.newsTrue[this.noticeIndex].title
			},
			getDanmu() {
				this.$api.index.danmu().then(res => {
					this.danmu = res.data.danmu
					this.dmSendTimer = setInterval(() => {
						this.$refs.lffBarrage.add({
							item: this.danmu[this.dmKey].content
						});
						if (this.dmKey === this.danmu.length - 1) {
							this.dmKey = 0
							clearInterval(this.dmSendTimer)
							this.dmSendTimer = null
							return false
						}
						++this.dmKey
					}, 1000)
				})
			},
			changeTx(res) {
				uni.uploadFile({
					url: this.$serverUrl + '/api/upload/uploadImg', //仅为示例，非真实的接口地址
					filePath: res.detail.avatarUrl,
					name: 'file',
					success: (uploadFileRes) => {
						this.userInfo.avatar = JSON.parse(uploadFileRes.data).data.image
					}
				});
			},
			isCoordinateWithinRectangle(lat, lng) {
				// swLat, swLng: 西南角的纬度和经度  
				// neLat, neLng: 东北角的纬度和经度  
				// lat, lng: 要检查的经纬度  
				let swLat = this.areaCenter.southwest.latitude
				let swLng = this.areaCenter.southwest.longitude
				let neLat = this.areaCenter.northeast.latitude
				let neLng = this.areaCenter.northeast.longitude
				return (
					lat >= swLat && lat <= neLat && // 纬度在范围内  
					lng >= swLng && lng <= neLng // 经度在范围内  
				);
			},
			setLocation(type) {
				uni.getLocation({
					type: 'gcj02',
					isHighAccuracy: true,
					highAccuracyExpireTime: 3500,
					success: (res) => {
						if (res.errMsg === "getLocation:ok") {
							console.log('用户定位位置：', res);
							this.userCenter = {
								latitude: res.latitude,
								longitude: res.longitude
							}
							this.$api.index.indexLocation({
								lng: res.longitude,
								lat: res.latitude
							})
							this.center = {
								latitude: res.latitude,
								longitude: res.longitude
							}
							this.mapContext.moveToLocation()
							if (this.pageType === 'user') {
								this.getIndexUser1()
							}
							// if (this.isCoordinateWithinRectangle(this.userCenter.latitude, this.userCenter
							// 		.longitude)) {

							// }
						}
					}
				})

			},
			getArea() {
				this.$api.index.jingdian().then(res => {
					this.jdList = res.data.jingdian
					let userList = res.data.jingdian.map(item => {
						return {
							id: item.id,
							latitude: item.lat,
							longitude: item.lng,
							iconPath: item.image,
							width: 30,
							height: 30,
							label: {
								content: item.title,
								color: '#ffffff',
								fontSize: 12,
								borderRadius: 4,
								bgColor: '#EC2424',
								padding: 2,
								textAlign: 'center',
								anchorX: 0,
								anchorY: -55,
							}
						}
					})
					this.mapContext.addMarkers({
						clear: true,
						markers: userList
					})
				})
			},
			inviteUser() {
				if (this.selectUser.yq_stu === 1) {
					return false
				}
				this.$api.index.yaoqing({
					uid: this.selectUser.id
				}).then(res => {
					this.selectUser.yq_stu = 1
				})
			},
			markertap(e) {
				if (this.pageType === 'area') {
					return false
				}
				this.$api.index.user_info({
					uid: e.markerId,
					lng: this.userCenter.longitude,
					lat: this.userCenter.latitude
				}).then(res => {
					this.selectUser = res.data.user
					this.peopleShow = true
				})
			},
			videoErrorCallback(e) {
				console.log('err', e);
			},
			looklxt() {
				uni.previewImage({
					urls: [this.areaInfo.jq_map]
				})
			},
			handlerNews(idx) {
				console.log('idx', idx);
				uni.navigateTo({
					url: "/pages/index/newsInfo?id=" + this.newsTrue[idx].id
				})
			},
			getPageMsg() {
				this.$api.index.news().then(res => {
					this.newsTrue = res.data.news
					this.news = this.newsTrue[this.noticeIndex].title
				})
				this.getUserInfo()
				this.$api.index.indexIntro().then(res => {
					this.areaInfo = res.data.jingqu
				})
				this.$api.index.shuoming().then(res => {
					this.helpInfo = res.data.content
				})
			},
			getUserInfo() {
				this.$api.user.userIndex().then(res => {
					res.data.user.biaoqian = res.data.user.biaoqian.length === 1 && res.data.user.biaoqian[0] ===
						'' ? [] : res.data.user.biaoqian
					this.userInfo = res.data.user
					if (uni.$u.test.isEmpty(this.userInfo.label)) {
						this.userShow = true
					}
				})
			},
			sendMsg() {
				this.$api.index.dodanmu({
					content: this.value1
				}).then(res => {
					uni.showToast({
						title: '提交成功，等待审核',
						icon: "none"
					});
					this.value1 = ''
					this.sendShow = false
				})
			},
			changeUserType(type) {
				this.userType = type
				this.getIndexUser()
			},
			getIndexUser1() {
				this.$api.index.indexUser({
					label: this.userType
				}).then(res => {
					this.userList = res.data.user
					let userList = res.data.user.map(item => {
						return {
							id: item.id,
							latitude: item.lat,
							longitude: item.lng,
							iconPath: item.avatar,
							width: 30,
							height: 30,
							label: {
								content: item.nickname,
								color: '#ffffff',
								fontSize: 12,
								borderRadius: 4,
								bgColor: '#EC2424',
								padding: 2,
								textAlign: 'center',
								anchorX: 0,
								anchorY: -55,
							}
						}
					})
					this.mapContext.addMarkers({
						clear: true,
						markers: userList
					})
				})

			},
			getIndexUser() {
				this.getIndexUser1()
				if (this.indesUserTimer) {
					clearInterval(this.indesUserTimer)
				}
				this.indesUserTimer = setInterval(() => {
					this.getIndexUser1()
				}, 40000)
			},
			changePageType(type) {
				this.pageType = type
				if (type === 'user') {
					this.getIndexUser()
				} else if (type === 'area') {
					this.getArea()
				}
			},
			delBiaoqian(idx) {
				this.userInfo.biaoqian.splice(idx, 1)
				this.$forceUpdate()
			},
			addBQ() {
				uni.showModal({
					title: '提示',
					placeholderText: '请输入个性化标签',
					editable: true,
					success: (res) => {
						if (res.confirm) {
							if (uni.$u.test.isEmpty(res.content)) {
								uni.showToast({
									title: "个性化标签不能为空",
									icon: "none"
								})
								return false
							}
							this.userInfo.biaoqian.push(res.content)
						}
					}
				});
			},
			chageUserLabel(label) {
				this.userInfo.label = label
			},
			saveUser() {
				if (uni.$u.test.isEmpty(this.userInfo.avatar)) {
					uni.showToast({
						title: "头像不能为空",
						icon: "none"
					})
					return false
				}
				if (uni.$u.test.isEmpty(this.userInfo.nickname)) {
					uni.showToast({
						title: "昵称不能为空",
						icon: "none"
					})
					return false
				}
				if (uni.$u.test.isEmpty(this.userInfo.label)) {
					uni.showToast({
						title: "标签不能为空",
						icon: "none"
					})
					return false
				}
				if (this.userInfo.biaoqian.length===0) {
					uni.showToast({
						title: "个性化标签不能为空",
						icon: "none"
					})
					return false
				}
				this.$api.user.doinfo({
					nickname: this.userInfo.nickname,
					avatar: this.userInfo.avatar,
					label: this.userInfo.label,
					biaoqian: this.userInfo.biaoqian.join(',')
				}).then(res => {
					uni.showToast({
						title: "保存成功",
					})
					this.getUserInfo()
					this.userShow = false
				})
			},
			phoneLogin() {
				if (!uni.$u.test.mobile(this.phoneForm.mobile)) {
					uni.showToast({
						title: "手机号格式不正确",
						icon: "none"
					})
					return false
				}
				if (uni.$u.test.isEmpty(this.phoneForm.password)) {
					uni.showToast({
						title: "密码不能为空",
						icon: "none"
					})
					return false
				}
				this.$api.index.login(this.phoneForm).then(res => {
					uni.setStorageSync('token', res.data.token)
					this.phoneShow = false
					this.getPageMsg()
					this.setLocation(1);
					this.updateLocationChange();
					this.setTimer()
				})
			},
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				if (!uni.$u.test.mobile(this.phoneForm.mobile)) {
					uni.showToast({
						title: "手机号格式不正确",
						icon: "none"
					})
					return false
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$api.index.sms({
						mobile: this.phoneForm.mobile
					}).then(res => {
						uni.hideLoading();
						// 这里此提示会被this.start()方法中的提示覆盖
						uni.$u.toast('验证码已发送');
						// 通知验证码组件内部开始倒计时
						this.$refs.uCode.start();

					})
				} else {
					uni.$u.toast('倒计时结束后再发送');
				}
			},
		}
	}
</script>

<style scoped lang="scss">
	#map {
		width: 750rpx;
		height: calc(100vh - 50px);
	}

	.notice-wrap {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 2;
	}

	.danmu-wrap {
		position: fixed;
		top: 160rpx;
		left: 0;
		width: 100%;
		height: 500rpx;
		z-index: 2;
		pointer-events: none;
	}

	.submit-wrap {
		width: 100%;
		border-top: 1px solid #5B5B5B;

		.btn {
			flex: 1;
			height: 130rpx;
			font-size: 32rpx;
		}
	}

	.pop-wrap {
		width: 616rpx;
		height: auto;
		padding: 56rpx 58rpx 58rpx;

		.pop-title {
			text-align: center;
			font-weight: bold;
			font-size: 36rpx;
		}


		.form {
			width: 100%;

			.form-item {
				width: 100%;
				display: flex;
				align-items: center;
				border-bottom: 1px solid #E2E2E2;
				height: 142rpx;

				.phone-icon {
					flex-shrink: 0;
					white-space: nowrap;
					padding-right: 36rpx;
				}

				.inp {
					flex: 1;
				}

				.code {
					flex-shrink: 0;

					.get-code {
						width: 233rpx;
						height: 78rpx;
						border-radius: 39rpx;
						border: 1px solid #F4BD38;
						display: flex;
						align-items: center;
						justify-content: center;
						color: #F4BD38;
						font-size: 32rpx;
					}
				}
			}
		}

		.user-msg {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 30rpx;
			padding-top: 40rpx;

			.label {
				flex-shrink: 0;
				color: #000000;
				font-weight: bold;
				font-size: 32rpx;
			}

			.check {
				display: flex;
				align-items: center;

				.check-option {
					width: 140rpx;
					height: 68rpx;
					background: #ECECEC;
					border-radius: 34rpx;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 28rpx;
					color: #343434;
					border: 1px solid #ECECEC;
					margin-left: 70rpx;

					&.active {
						border: 1px solid #F4BD38;
						background: #FBFAF6;
						color: #F4BD38;
					}
				}
			}

			.add {
				font-size: 32rpx;
				color: #F4BD38;
			}

		}

		.tips {
			overflow: hidden;
			width: 100%;

			.tips-item {
				float: left;
				margin-right: 44rpx;
				width: auto;
				height: 69rpx;
				background: #FBFAF6;
				border-radius: 34rpx;
				border: 1px solid #F4BD38;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 28rpx;
				color: #F4BD38;
				padding: 0 28rpx;
				margin-bottom: 28rpx;

			}
		}

		.submit {
			margin: 130rpx auto 0;
			width: 400rpx;
			height: 110rpx;
			background: #F4BD38;
			border-radius: 55rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 36rpx;
			font-weight: bold;

			&.hui {
				background: #D5D5D5;
				color: #1F1F1F;
			}
		}
	}

	.page-center {
		position: fixed;
		bottom: 168rpx;
		left: 32rpx;
		background: #FFFFFF;
		z-index: 3;
		padding: 18rpx;
		border-radius: 50%;
		border: 1px solid #cacaca;

		.icon {
			width: 32rpx;
			height: auto;
			display: block;
		}
	}

	.page-btn-wrap {
		position: fixed;
		bottom: 168rpx;
		right: 32rpx;
		width: 147rpx;
		border-radius: 74rpx;
		background: #FFFFFF;
		z-index: 3;

		.bb {
			width: 62rpx;
			height: 1px;
			border: 1px solid #DFDFDF;
			margin: 0 auto;
		}

		.page-btn {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: center;
			flex-direction: column;
			padding: 32rpx 0;

			.icon {
				width: 50rpx;
				height: auto;
				margin-bottom: 18rpx;
			}

			.text {
				color: #1F1F1F;
			}

		}
	}

	.area-wrap {
		width: 100%;
		padding: 36rpx 32rpx;
		max-height: 50vh;
		overflow-y: auto;

		.area-msg {
			width: 100%;
			display: flex;
			margin-bottom: 52rpx;

			.area-pic {
				width: 240rpx;
				height: 240rpx;
				flex-shrink: 0;
			}

			.msg {
				flex: 1;
				padding-left: 46rpx;

				.title {
					line-height: 48rpx;
					font-size: 28rpx;
					font-weight: bold;
					margin-bottom: 42rpx;
				}

				.look {
					color: #F4BD38;
					font-size: 28rpx;
				}
			}
		}

		.user-info {
			width: 100%;
			margin-bottom: 66rpx;

			.tx {
				flex-shrink: 0;
				width: 120rpx;
				height: 120rpx;
				border-radius: 50%;
			}

			.msg {
				flex: 1;
				padding-left: 42rpx;

				.name {
					color: #1F1F1F;
					font-size: 27rFpx;
					font-weight: bold;
					margin-bottom: 30rpx;
				}

				.ads {
					color: #F4BD38;
					font-size: 26rpx;

					.dt {
						width: 28rpx;
						height: auto;
						margin-right: 20rpx;
					}
				}
			}
		}

		.area-tit {
			position: relative;
			padding-left: 22rpx;

			&::after {
				content: "";
				position: absolute;
				left: 0;
				top: 50%;
				transform: translateY(-50%);
				width: 6rpx;
				height: 26rpx;
				background: #F4BD38;
				border-radius: 1px;
			}
		}

		.area-content {
			margin-top: 32rpx;
			font-size: 28rpx;
		}
	}

	.avatar-wrapper {
		padding: 0;
		display: inline-block;
		border: 0 none;
		margin: 0;
		background-color: #fff;

		&::after {
			border: none;
		}
	}
</style>
<style>
	.marker {
		width: 40rpx;
		height: 40rpx;
		border-radius: 50%;
		background-color: #ccc;
		position: relative;
	}
</style>